<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <meta name="viewport" content="width=device-width" />  
    <title>jquery 图片base64</title>  
    <script type='text/javascript' src="https://code.jquery.com/jquery-3.2.1.min.js"></script>  
</head>  
<body>  
    </div>  
    <input id="theFile" type="file">  
    <img id="theImg" style="width:200px;">  
    <input id="getBase64" type="button" value="getBase64" />  
    <input id="btn" type="button" value="upload" />  
     
    <script>  
    
    function getBase64(elementId)
    {
    	 try {  
             var file = document.getElementById(elementId).files[0];  
             //判断图片类型
             if (!/image\/\w+/.test(file.type)) {  
                 alert("图片类型");  
                 return false;  
             }  
             var reader = new FileReader();  
             reader.onload = function () {  
            	  debugger
            	  //base64值为  this.result
            	 // alert(this.result);  
            	  $('#theImg').attr('src', this.result);  
                 // return this.result;
             }  
             reader.readAsDataURL(file);  
         } catch (e) {  
             alert('图片转Base64出错' + e.toString())  
         }  
    }
    
    
    $("#getBase64").click(function () {  
    		  debugger
    		  getBase64("theFile");
    });  

    $("#theFile").change(function () {  
		  debugger
		  getBase64("theFile");
  });  
      
    $("#btn").click(function () {  
		  debugger
		  //上传该 base64值即可 $('#theImg').attr('src')
		  alert($('#theImg').attr('src'));
});  
    </script>  
</body>  
</html> 
